<template>
	<view>
		<!-- <im-navBar ref="navBarRef" navbarText="音享乐" backAction></im-navBar> -->
		<view class="container animation-slide-right">
			<image class="music-img" src="/static/img/back2.jpg"></image>
			<view class="music-heard tui-flex  ">
				<tui-icon @click="backAction" class="tui-col-2" name="arrowleft" color="white" size="28"></tui-icon>
				<view class="tui-col-9 "></view>
				<view class="tui-col-1 "><image class="music-user-img tui-align-right" src="/static/img/back2.jpg" /></view>
				<!-- <tui-icon class="tui-col-2"  name="arrowleft" color="white" size="28"></tui-icon> -->
			</view>
			<view class="music-mian tui-flex">
				<view class="music-name tui-center ">
					<view class="tui-scorll-view music-name-info">
						<view class="tui-notice tui-animation">{{ song.title }}</view>
					</view>
				</view>
				<view v-if="booLrc"></view>
				<view v-else class="music-pic-mian">
					<view class="music-pic"><image class="music-pic-in circle-round" src="/static/img/back1.jpg" /></view>
				</view>
			</view>
			<view class="music-chat"></view>
			<view class="music-foot  ">
				<view class="music-foot-progress">
					<im-progress :value="percent" @changed="changePlayTimeFu"></im-progress>
					<!-- <progress :percent="percent" active stroke-width="3" backgroundColor="#999" active-mode="forwards" /> -->
				</view>
				<view class="music-foot-action tui-flex">
					<video
						class="hidden"
						:id="vidoeId"
						:src="song.src"
						object-fit="fill"
						:ref="vidoeId"
					></video>
					<view class="tui-col-4 tui-center"><im-iconfont @click="playOrUnplayFu" icon="playLast" size="60rpx"></im-iconfont></view>
					<view class="tui-col-4 tui-center">
						<im-iconfont @click="playOrUnplayFu" :icon="booPlay ? 'stopPlay' : 'paly'" size="60rpx" :color="booPlay ? 'red' : 'white'"></im-iconfont>
					</view>
					<view class="tui-col-4 tui-center"><im-iconfont @click="playOrUnplayFu" icon="palyNext" size="60rpx"></im-iconfont></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			vidoeId: '',
			videoContext: '',
			interval: null,
			booLrc: false,
			percent: 0,
			plaledTime: 0,
			booPlay: false,
			song: {
				src: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3',
				songTimeSize: 21*1000,
				title: 'THE TINY RICK RAP (小瑞克说唱)',
				lrcs: ['致力发展负责任的人工智能 中国发布八大治理原则', '格兰仕暗示拜访拼多多后遭天猫打压，拼多多高层赞其有勇气', '阿里计划将每股普通股拆为8股，增加筹资灵活性']
			}
		};
	},
	methods: {
		generateUUID() {
		    var d = new Date().getTime();
		    if (window.performance && typeof window.performance.now === "function") {
		        d += performance.now(); //use high-precision timer if available
		    }
		    var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
		        var r = (d + Math.random() * 16) % 16 | 0;
		        d = Math.floor(d / 16);
		        return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
		    });
		    return uuid;
		},
		backAction() {
			uni.navigateBack();
		},
		playOrUnplayFu() {
			if (this.booPlay) {
				clearInterval(this.intervalId);
				// this.videoContext.seek(0);
				this.videoContext.pause();
				this.stopPlay();
			} else {
				this.videoContext.play();
				this.play();
			}
		},
		changePlayTimeFu(e1, e2) {
			// this.percent = e1;
			this.plaledTime = this.song.songTimeSize * e1.progress * 0.01
			this.videoContext.seek(this.plaledTime/1000);
		},
		play() {
			let _that = this;
			_that.booPlay = true;
			this.interval = setInterval(function() {
				_that.plaledTime = _that.plaledTime + 1000;
				_that.percent = (_that.plaledTime / _that.song.songTimeSize) * 100;
				console.log('interval--' + _that.percent);
				if (_that.percent >= 100) {
					_that.plaledTime = 0
					_that.percent = 0
					_that.stopPlay()
				}
			}, 1000);
		},
		stopPlay() {
			clearInterval(this.interval);
			this.booPlay = false;
		}
	},
	created() {
		let videoId = this.generateUUID()
		this.vidoeId = videoId;
		this.videoContext = uni.createVideoContext(videoId);
	}
};
</script>

<style scoped>
.container {
	height: 100vh;
	position: flex;
	display: flex;
	flex-direction: column;
	z-index: -1;
}
.music-img {
	height: 100vh;
	width: 100vw;
}
.music-user-img {
	border-radius: 50%;
	height: 60rpx;
	width: 60rpx;
}
.music-heard {
	height: 60rpx;
	width: 95%;
	position: absolute;
	z-index: 10000;
	margin-top: 10rpx;
}
/* box-shadow:inset 2px 2px 5px #000; */
.music-mian {
	width: 100%;
	position: absolute;
	z-index: 2;
}
.music-name {
	margin-top: 100rpx;
	color: white;
	position: absolute;
	height: 50rpx;
	line-height: 50rpx;
	width: 100%;
}
.music-name-info {
	margin: 20%;
}
.music-pic-mian {
	width: 100%;
	height: 600rpx;
}
.music-pic {
	height: 400rpx;
	width: 400rpx;
	border-radius: 50%;
	background-color: #949494;
	margin: 0 auto;
	margin-top: 300rpx;
	box-shadow: 5px 5px 5px #a7a7a7;
}

.music-pic-in {
	height: 360rpx;
	width: 360rpx;
	border-radius: 50%;
	margin-top: 20rpx;
	margin-left: 20rpx;
	background-color: #ffffff;
	box-shadow: inset 2px 2px 5px #000;
}
.circle-round {
	-webkit-animation: circle-round 10s infinite linear;
}
@-webkit-keyframes circle-round {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
.music-chat {
	width: 100%;
	height: 300rpx;
	/* background-color: #16AB60; */
	position: absolute;
	z-index: 2;
	bottom: 200rpx;
}
.music-foot {
	width: 100%;
	height: 250rpx;
	position: absolute;
	z-index: 2;
	bottom: 0;
}
.music-foot-progress {
	height: 10rpx;
	line-height: 10rpx;
	width: 95%;
	position: absolute;
	bottom: 150rpx;
	padding: 2.5%;
}
.music-foot-action {
	bottom: 50rpx;
	width: 100%;
	position: absolute;
}

</style>
